<template>
  <view>
    <u-navbar title="订单核销" title-size="36" height="50">
      <view class="slot-wrap" @click="toPersonal">
        <text>个人中心</text>
      </view>
    </u-navbar>

    <view class="card box" @click="scanCode()">
      <view class="card-tl">扫描用户核销二维码进行核销验证</view>
      <u-image src="@/static/store/hxm.png" width="150rpx" height="150rpx"></u-image>
    </view>
    <view class="card box">
      <view class="card-tl">输入用户核销数字码进行核销验证</view>
      <input v-model="clerkNo" placeholder="输入用户有效数字核销码" class="card-input" />
      <view class="bt" @click="toClerk">确认核销</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      clerkNo: ''
    }
  },
  onLoad(options) {
    this.clerkNo = options.code || ''
  },
  methods: {
    toPersonal() {
      uni.reLaunch({
        url: '/pages/ucenter/ucenter'
      })
    },
    toClerk() {
      const app = this
      if (!app.clerkNo) {
        app.$u.toast('请扫码获取或输入核销码')
        return
      }
      app.$u
        .get('/app-api/trade/order/get-by-verify-code', {
          verifyCode: app.clerkNo
        })
        .then((res) => {
          if (res.code === 0) {
            app.$u.route('/store/action', {
              code: app.clerkNo
            })
            app.clerkNo = ''
          } else {
            app.clerkNo = ''
            app.$u.toast(res.msg)
          }
        })
    },
    scanCode() {
      const app = this
      // 允许从相机和相册扫码
      uni.scanCode({
        // scanType: ['QR_CODE'], //条形码
        success: function (res) {
          console.debug('条码内容：' + res.result)
          // 扫描到的信息
          if (res.result) {
            uni.reLaunch({
              url: '/pages/index/splash?q=' + encodeURIComponent(res.result)
            })
          }
        },
        fail: function (res) {
          console.warn('扫码失败：', res)
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.card {
  margin: auto;
  width: 710rpx;
  background: #ffffff;
  border-radius: 10rpx;
  margin-top: 20rpx;
  padding: 20rpx;
  text-align: center;
}

.store-info {
  text-align: left;

  .info {
    height: 150rpx;
    flex-flow: column;
    margin-left: 20rpx;
    flex: 1;

    .tl {
      font-weight: 600;
      font-size: 34rpx;
      color: #333333;
    }

    .houre {
      font-size: 26rpx;
      color: #666666;
    }

    .star {
      font-size: 26rpx;
      color: #666666;

      &-num {
        font-weight: 600;
        font-size: 34rpx;
        color: #ff7626;
      }
    }

    .charge {
      width: 188rpx;
      height: 52rpx;
      background: #dff5f2;
      border-radius: 26rpx;

      text {
        color: #10a28f;
        padding-left: 10rpx;
        line-height: 52rpx;
      }
    }
  }
}

.box {
  display: flex;
  flex-flow: column;
  align-items: center;
  padding: 61rpx 0;

  .card-tl {
    margin-bottom: 60rpx;
    font-size: 30rpx;
  }

  .card-input {
    width: 650rpx;
    height: 100rpx;
    background: #f5f5f5;
    border-radius: 50rpx;
    margin-bottom: 60rpx;
  }

  .bt {
    width: 650rpx;
    height: 100rpx;
    line-height: 100rpx;
    background: #10a28f;
    border-radius: 50rpx;
    font-size: 32rpx;
    color: #ffffff;
  }
}

.des {
  font-size: 28rpx;
  color: #999999;
  text-align: center;
  margin-top: 120rpx;
  line-height: 48rpx;

  .line {
    text-decoration: underline;
  }
}

.account {
  padding: 80rpx 20rpx 50rpx 20rpx;

  &-des {
    color: #f54831;
    margin-bottom: 30rpx;
  }

  &-info {
    .url-tl {
      font-size: 30rpx;
      margin-bottom: 20rpx;
    }

    .url-box {
      width: 710rpx;
      background: #f5f5f5;
      border-radius: 10rpx;
      padding: 25rpx 20rpx;
      line-height: 48rpx;
    }
  }
}
</style>
